<template>
  <div>
    <div class="calibration">
      <div class="title">
        <p>{{ t('paymentManagement_page_information') }}</p>
      </div>

      <div class="content">
        <!-- 完善绑定银行卡 -->
        <div v-if="withDrawTypeObj.payname === 'bankcard_0'" class="bank">
          <div class="add_bank_text form_title">
            <p>{{ t('paymentManagement_page_oneBank') }}</p>
            <iconpark-icon :icon-id="bankFlag ? 'x' : 'gou-f4melk0d'" size="1.125rem"></iconpark-icon>
          </div>
          <div class="bank_form item_form" v-if="bankFlag">
            <nut-form ref="bankFormRef" label-position="top" class=" bank_add_form" :model-value="bankForm">
              <nut-form-item :label="t('addBank_page_pChooseBank')">
                <div class="choose_bank">
                  <div class="choose_bank_l item-center">
                    <span class="bank_cicon" v-if="chooseBank.value">
                      <ImgT :key="chooseBank.value" :src="`/imgs/bankIcon/bank_logo_${chooseBank.value}.webp`"
                        :alt="chooseBank.label" />
                    </span>
                    <span class="bank_cname"> {{ chooseBank.label }} </span>
                  </div>
                  <nut-button :bordered="false" block class="change_btn" @click="showChangeBank">{{
                    t('deposit_page_changeWay') }}</nut-button>
                </div>
              </nut-form-item>

              <nut-form-item :label="t('addBank_page_bankCard')" path="bankCode">
                <nut-input size="large" @input="validateInput" v-model="bankForm.bankCode"
                  :placeholder="t('paymentManagement_page_chCardNo')">
                  <template #suffix>
                    <span class="refresh_icon"></span>
                  </template>
                </nut-input>
              </nut-form-item>

              <nut-form-item :label="t('addBank_page_name')" path="accountName">
                <nut-input size="large" :disabled="!!cardholder_name" v-model.trim="bankForm.accountName"
                  :placeholder="t('paymentManagement_page_enterBank')">
                  <template #suffix>
                    <span class="refresh_icon"></span>
                  </template>
                </nut-input>
              </nut-form-item>
              <div class="btn">
                <nut-button :bordered="false" block class="sub_btn" @click="submitBank">
                  {{ t('paymentManagement_page_confirm') }}
                </nut-button>
              </div>
            </nut-form>
          </div>
          <!-- 已绑定银行卡 -->
          <div v-else class="bank_finish item_finish item_form">
            <div class="bank_list">
              <div class="bank_item">
                <div class="bank_l_icon">
                  <ImgT :key="bankForm.bank" :src="`/imgs/bankIcon/bank_logo_${bankForm.bank}.webp`" alt="nodata" />
                </div>
                <div class="bank_l_name">
                  <p>
                    <span>{{ bankForm.bankName }}</span>
                  </p>
                  <p><span>*******</span></p>
                  <p>{{ maskTxtString(bankForm.bankCode) }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 完善绑定Usdt -->
        <div v-if="withDrawTypeObj.payname === 'usdt'" class="bank usdt_box">
          <div class="add_bank_text form_title">
            <p>{{ t('paymentManagement_page_oneUsdt') }}</p>
            <iconpark-icon :icon-id="usdtFlag ? 'x' : 'gou-f4melk0d'" size="1.125rem"></iconpark-icon>
          </div>
          <div class="bank_form item_form" v-if="usdtFlag">
            <nut-form ref="bankFormRef" label-position="top" class=" bank_add_form" :model-value="usdtForm">
              <nut-form-item class="yh_item" :label="t('deposit_page_chooseNetWork')">
                <div class="select_dis">
                  <span :class="`network_icon network_icon_${usdtForm.usdt_type}`"></span>
                  <nut-menu>
                    <nut-menu-item v-model="usdtForm.usdt_type" :options="netWorkArr" />
                  </nut-menu>
                </div>
              </nut-form-item>
              <nut-form-item :label="t('withdraw_page_usdtAdd')">
                <nut-input v-model.trim="usdtForm.usdt_addr" :placeholder="t('paymentManagement_page_usdt_tips')"
                  clearable />
              </nut-form-item>
              <nut-form-item :label="t('paymentManagement_page_remark')">
                <nut-input v-model.trim="usdtForm.desc" :placeholder="t('paymentManagement_page_usdt_describe')"
                  clearable />
              </nut-form-item>
              <div class="btn">
                <nut-button :bordered="false" block class="sub_btn" @click="submitUsdt">
                  {{ t('paymentManagement_page_confirm') }}
                </nut-button>
              </div>
            </nut-form>
          </div>
          <!-- 已绑定usdt地址 -->
          <div v-else class="bank_finish item_finish item_form">
            <div class="bank_list usdt_list">
              <div class="bank_item">
                <div class="bank_l_icon">
                  <ImgT :src="`/imgs/payment/bindCard/usdt.webp`" alt="nodata" />
                </div>
                <div class="bank_l_name">
                  <p>
                    {{netWorkArr.find((item: any) => item.value === usdtForm.usdt_type)?.text}}
                  </p>
                  <p>{{ usdtForm.usdt_addr }}</p>
                  <p class="txt_ellipsis">{{ usdtForm.desc }}</p>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="phone">
          <div class="add_bank_text form_title">
            <p>{{ t('paymentManagement_page_bindMobile') }}</p>
            <iconpark-icon :icon-id="phoneFlag ? 'x' : 'gou-f4melk0d'" size="1.125rem"></iconpark-icon>
          </div>

          <div v-if="phoneFlag" class="phone_form item_form">
            <nut-form ref="phoneFormRef" label-position="top" :model-value="phoneForm">
              <nut-form-item :label="t('paymentManagement_page_phoneNum')" path="phone">
                <div class="flex phone_input">
                  <div class="phone_hand">
                    <p>+84</p>
                    <span class="xl_icon"></span>
                  </div>
                  <nut-input clearable size="large" v-model="phoneForm.phone"
                    :placeholder="t('home_page_enterPhoneNumber')"></nut-input>
                </div>
              </nut-form-item>

              <nut-form-item :label="t('home_page_smsCode')" path="phoneCode">
                <div class="flex phoneCode">
                  <nut-input clearable size="large" v-model="phoneForm.phoneCode"
                    :placeholder="t('home_page_enterVerificationCode')"></nut-input>

                  <nut-button :bordered="false" :loading="phoneCodeLoading" @click="beforeSendCode"
                    :disabled="phoneCodeDisabled" block class="change_btn">{{ phoneCodeText
                    }}</nut-button>
                </div>
              </nut-form-item>

              <div class="flex item-center justify-center btn">
                <nut-button :bordered="false" block class="sub_btn" @click="submitPhone">
                  {{ t('paymentManagement_page_confirm') }}
                </nut-button>
              </div>

            </nut-form>
          </div>

          <div v-else class="phone_finish item_finish item_form">
            <div class="bank_list flex">
              <div class="bank_item flex">
                <div class="bank_l_icon">
                  <ImgT src="/imgs/wallet/phone.webp" alt="nodata" />
                </div>
                <div class="bank_l_name" style="margin-left: 40px;">
                  <p style="margin-bottom: 10px;">
                    <span>+84</span>
                  </p>
                  <p>{{ maskNumberPhone(phoneForm.phone) }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="capital">
          <div class="add_bank_text form_title">
            <p>{{ t('paymentManagement_page_setPayPwd') }}</p>
            <iconpark-icon :icon-id="capitalFlag ? 'x' : 'gou-f4melk0d'" size="1.125rem"></iconpark-icon>
          </div>

          <div class="capital-form item_form" v-if="capitalFlag">
            <nut-form ref="capitalFormRef" label-position="top" :model-value="capitalForm" :rules="payPwdRules">
              <nut-form-item :label="t('paymentManagement_page_setPwd')" prop="new_password">
                <!--              :type="changeRightInfo.pwd1.type"-->
                <nut-input clearable size="large" v-model="capitalForm.new_password" type="number"
                  :max-length="8"
                  :class="changeRightInfo.pwd1.type === 'password' ? 'txt_password' : ''"
                  :placeholder="t('paymentManagement_page_plSetPayPwd')">
                  <template #right>
                    <div class="flex item-center" @click="iconClick('pwd1')">
                      <iconpark-icon color="#A8A8CA" size="1.3rem" :name="changeRightInfo.pwd1.icon"></iconpark-icon>
                    </div>
                  </template>
                </nut-input>
              </nut-form-item>
              <nut-form-item :label="t('paymentManagement_page_repPwd')" prop="new_password_confirm">
                <!--              :type="changeRightInfo.pwd2.type"-->
                <nut-input clearable size="large" v-model="capitalForm.new_password_confirm" type="number"
                  :max-length="8"
                  :class="changeRightInfo.pwd2.type === 'password' ? 'txt_password' : ''"
                  :placeholder="t('home_page_secPwd')">
                  <template #right>
                    <div class="flex item-center" @click="iconClick('pwd2')">
                      <iconpark-icon color="#A8A8CA" size="1.3rem" :name="changeRightInfo.pwd2.icon"></iconpark-icon>
                    </div>
                  </template>
                </nut-input>
              </nut-form-item>

              <div class="flex item-center justify-center btn">
                <nut-button :bordered="false" block class="sub_btn" @click="submitCapital">
                  {{ t('paymentManagement_page_confirm') }}
                </nut-button>
              </div>

            </nut-form>
          </div>

          <div v-else class="capital_finish item_finish item_form">
            <div class="button_color">
              {{ t('paymentManagement_page_setFinish') }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 短信验证码发送确认弹窗 -->
    <Modal :zindex="10099" v-model:visible="SMSModal" :title="t('home_page_smsTitle')">
      <div class="tips">
        <p>
          {{ t("home_page_smsContent") }}<b>{{ t("home_page_smsPrice") }}</b>{{ t("home_page_smsContent1") }}
        </p>
        <p>
          {{ t("home_page_smsContent22") }}
          <span @click="router.push('/deposit')">{{ t("SMSFeeDeduction_14") }}</span>
        </p>
        <nut-button class="btn_block" :bordered="false" block @click="submitSendPhoneCode">
          {{ t("home_page_confirm") }}</nut-button>
      </div>
    </Modal>
    <!-- 选择银行弹窗 -->
    <chooseBankDialog ref="chooseBankModal" @selectBank="selectBank" />

  </div>
</template>

<script setup lang="ts">

import {onMounted, onUnmounted, ref, watch} from "vue";
import { showToast } from "@nutui/nutui";
import PKwebsocket from "@/lolo/Ws";
import eventBus from "@/lolo/eventBus";
import { NetPacket } from "@/netBase/NetPacket";
import { useI18n } from "vue-i18n";
import { replaceChinese, testBankCard, testBankName, verifyMobile } from "@/utils/validateTools.ts";
import { aaa, bbb, getDeviceId, getRandomSign } from "@/net/Utils";

import { storeToRefs } from 'pinia';
import pinia from '@/store';
import { User } from '@/store/user';
import { IP, updateStorePayPwd, updateUserInfo } from "@/utils/useStoreMethods";
import { Local } from "@/utils/storage.ts";
import { maskTxtString, netWorkArr, validateCryptoAddress } from '@/utils/publicMethods';
import { againWithdrawValidator, WithdrawValidator } from "@/views/securitySettings/validator.ts";
import chooseBankDialog from '@/views/deposit/chooseBankDialog.vue';

const UserStore = User(pinia);
const { info: userInfo, roleInfo } = storeToRefs(UserStore);
const { t } = useI18n();
import { useRouter } from "vue-router";

const router = useRouter();

// const props = defineProps<{
//   bankListData: any
//   calibrationVisible: any
//   myBankData: any
// }>()

const emit = defineEmits<{
  openChooseBank: any,
  upDateAllList: any,
  closeCalibraWin: any,
}>()

const myBankData: any = ref( Local.get("myBankData") || {})
const withDrawTypeObj = ref(Local.get('curWithdrawWay'));
const cardholder_name = ref('')
const bankFlag = ref(true)
const usdtFlag = ref(true)
const phoneFlag = ref(true)
const capitalFlag = ref(true)
// 银行
const bankForm: any = ref({
  bank: 0, // 银行ID
  bankName: '',// 银行名称
  bankCode: '',
  accountName: '',
})
// usdt-提交参数
const dataParams = {
  usdt_type: 1,
  usdt_addr: '',
  desc: '',
}
const usdtForm = ref( // 表单提交
  { ...dataParams }
);
const chooseBank = ref({ label: '', value: '' }); // 选择的银行卡
// 手机
const phoneForm = ref({
  codeValue: '84',
  phone: '',
  phoneCode: '',
})
const SMSModal = ref(false);
const phoneCodeText = ref<string | number>(t('home_page_send'))
const phoneCodeDisabled = ref(false);
const phoneCodeLoading = ref(false);
const bankListData = ref({ value: 0, label: '' });
const chooseBankModal = ref();

// 选择银行
const selectBank = (e: any) => {
  bankListData.value = e
  // chooseBank.value = e;
}
// 打开银行弹窗
const openChooseBank = () => {
  chooseBankModal.value.onCloseBank();
}
// 资金密码
const capitalForm = ref({
  new_password: '',
  new_password_confirm: '',
});
const capitalFormRef = ref();
const payPwdRules = {
  new_password: [{ validator: WithdrawValidator }],
  new_password_confirm: [
    {
      validator: (val: any) => {
        return againWithdrawValidator(val, capitalForm.value.new_password);
      },
    },
  ],
};
// 限制只能输入输入数字
const validateInput = () => {
  bankForm.value.bankCode = bankForm.value.bankCode.replace(/[^0-9]/g, '');
}
const changeRightInfo: any = ref({
  pwd1: {
    icon: 'hide',
    type: 'password'
  },
  pwd2: {
    icon: 'hide',
    type: 'password'
  }
})
const iconClick = (type: any) => {
  if (changeRightInfo.value[type].icon == "hide") {
    changeRightInfo.value[type].type = "text"
    changeRightInfo.value[type].icon = "show"
  } else {
    changeRightInfo.value[type].type = "password"
    changeRightInfo.value[type].icon = "hide"
  }
}

const goToWithdraw = (url: any) => {
  if (!withDrawTypeObj.value.payname) {
    return showToast.fail(t('method_error'));
  }
  setTimeout(() => {
    Local.set('profileCompleted', 'true')
    router.replace(url);
  }, 500);
}

const setBaseData = () => {
  console.log('get------myBankData', myBankData.value)
  if (myBankData.value.list && myBankData.value.list.length) {
    setmyDataData(myBankData.value.list, 'array')
  }
  if (myBankData.value.withdraw_pwd) {
    setmyDataData(myBankData.value.withdraw_pwd, 'pwd')
  }
  if (myBankData.value.phone) {
    setmyDataData(myBankData.value.phone, 'phone')
  }
  if (myBankData.value.cardholder_name) {
    cardholder_name.value = myBankData.value.cardholder_name
  }
  console.log('bankFlag.value', bankFlag.value)
  console.log('usdtFlag.value', usdtFlag.value)
  console.log('phoneFlag.value', phoneFlag.value)
  console.log('capitalFlag.value', capitalFlag.value)
  if((!bankFlag.value || !usdtFlag.value) && !phoneFlag.value && !capitalFlag.value) {
    const url: any = {
      bankcard_0: `/withdrawalNext?type=bankcard_0`,
      usdt: `/withdrawalNext?type=usdt`,
    }
    Local.set('profileCompleted', 'true');
    goToWithdraw(url[withDrawTypeObj.value.payname]);
  }
   else {
    Local.set('profileCompleted', 'false');
  }
}
const setmyDataData = (count: any, key: string) => {
  console.log('------***', count, key)
  // 银行卡
  if (key === 'array' && count.length && withDrawTypeObj.value.payname === 'bankcard_0') {
    bankFlag.value = false
    bankForm.value.bank = count[0].bank_id
    bankForm.value.bankCode = count[0].account_number
    bankForm.value.bankName = count[0].bank_name
  }
  // usdt
  if (key === 'array' && count.length && withDrawTypeObj.value.payname === 'usdt') {
    usdtFlag.value = false
    usdtForm.value.usdt_addr = count[0].usdt_addr
    usdtForm.value.desc = count[0].desc
    usdtForm.value.usdt_type = count[0].usdt_type
  }
  if (key === 'phone') {
    phoneForm.value.phone = count
    phoneFlag.value = false;
  }
  if (key === 'pwd') {
    capitalFlag.value = false;
  }
}

const submitBank = () => {
  if (!bankForm.value.bank) return showToast.fail(t('paymentManagement_page_chBank'));
  if (!bankForm.value.bankCode) return showToast.fail(t('paymentManagement_page_chCardNo'));
  if (!testBankCard(bankForm.value.bankCode)) {
    return showToast.fail(t('paymentManagement_page_tip1'))
  }
  if (!bankForm.value.accountName) {
    return showToast.fail(t('paymentManagement_page_enterBank'));
  }
  if (!testBankName(bankForm.value.accountName)) {
    bankForm.value.accountName = replaceChinese(bankForm.value.accountName);
    return showToast.fail(t('paymentManagement_page_chName'))
  }
  const req = NetPacket.req_new_bank_card_info();
  req.bank_id = bankForm.value.bank;
  req.account_number = bankForm.value.bankCode;
  req.cardholder_name = myBankData.value.cardholder_name ? myBankData.value.cardholder_name : bankForm.value.accountName?.replace(/\s+/g, '').toUpperCase(); // 保存需要去除空格和转大写
  // Net.instance.sendRequest(req);
  PKwebsocket.instance.send(req, true);
}
// result: 2 // 1 成功，2 失败
const handleAddBank = (res: any) => {
  const tips: any = {
    1: 'paymentManagement_page_addBankSuc',
    2: 'paymentManagement_page_addBankFail',
    3: 'paymentManagement_page_tip3',
    4: 'paymentManagement_page_tip4',
    5: 'paymentManagement_page_tip4',
  }
  if (res.result === 1) {
    emit('upDateAllList')
    bankFlag.value = false
    showToast.success(t(tips[res.result]), { duration: 500 });
    setBaseData()
  } else {
    showToast.fail(t(tips[res.result]), { duration: 500 });
  }
};

// 绑定usdt
const submitUsdt = () => {
  if (!usdtForm.value.usdt_addr) {
    return showToast.fail(t('paymentManagement_page_usdt_tips'))
  }
  if (!validateCryptoAddress(usdtForm.value.usdt_addr, usdtForm.value.usdt_type)) {
    return showToast.fail(t('usdt_bind_fail2'))
  }
  const req = NetPacket.req_add_usdt_info();
  req.usdt_type = usdtForm.value.usdt_type;
  req.usdt_addr = usdtForm.value.usdt_addr;
  req.desc = usdtForm.value.desc;
  PKwebsocket.instance.send(req, true);
}
// result: 2 // 1 成功，2 失败
const handleAddUsdt = (res: any) => {
  const tips: any = {
    1: 'paymentManagement_page_addBankSuc',
    2: 'paymentManagement_page_errorAdd',
    3: 'paymentManagement_page_addBankFail',
    4: 'paymentManagement_page_hasAdd',
    5: 'paymentManagement_page_hasAdd',
  }
  if (res.result === 1) {
    emit('upDateAllList')
    usdtFlag.value = false
    showToast.success(t(tips[res.result]), { duration: 500 })
    setBaseData()
  } else {
    showToast.fail(t(tips[res.result]), { duration: 500 })
  }
}

const showChangeBank = () => {
  // emit('openChooseBank')
  openChooseBank();
}

const submitPhone = async () => {
  let phoneFormat = verifyMobile(phoneForm.value.codeValue, phoneForm.value.phone)
  if (!phoneFormat) return showToast.fail(t('home_page_phoneNumberFormatIncorrect'), { duration: 3000 });
  if (!phoneForm.value.phoneCode) return showToast.fail(t('home_page_enterSmsCode'), { duration: 3000 });

  let req: any = NetPacket.req_bind_modify_email();
  req.email = phoneForm.value.codeValue + phoneForm.value.phone;
  req.username = userInfo.value?.full_name;
  req.captcha = phoneForm.value.phoneCode;
  req.operate_type = 3;
  req.agent_id = roleInfo.value.id; //Local.get('agentid')
  req.aaa = aaa;
  req.bbb = bbb;
  // req.ip = await IP();
  req.ip = await IP();
  let id = await getDeviceId();
  req.sign = getRandomSign(id);
  PKwebsocket.instance.send(req, true);
}
const beforeSendCode = () => {
  let phoneFormat = verifyMobile(phoneForm.value.codeValue, phoneForm.value.phone)
  if (!phoneFormat) return showToast.fail(t('home_page_phoneNumberFormatIncorrect'));
  SMSModal.value = true;
}
// 验证码
const submitSendPhoneCode = () => {
  phoneCodeLoading.value = true;
  const req = NetPacket.req_get_mobile_sms_code();
  req.mobile = phoneForm.value.codeValue + phoneForm.value.phone;
  req.operate_type = 1;
  PKwebsocket.instance.send(req, true);
}

const handleSMSback = (res: any) => {
  phoneCodeLoading.value = false;
  SMSModal.value = false;
  const msgTxt = t(res.message);
  if (res.code == 1) {
    if (res.message) {
      showToast.success(msgTxt);
    }
    let timer = 180;
    phoneCodeDisabled.value = true;
    phoneCodeText.value = timer;
    let timeInterval = setInterval(() => {
      phoneCodeText.value = timer--;
      if (timer <= 0) {
        clearInterval(timeInterval);
        phoneCodeDisabled.value = false;
        phoneCodeText.value = t('home_page_send');
      }
    }, 1000);
  } else {
    showToast.fail(msgTxt);
    phoneCodeDisabled.value = false;
  }
}

// 返回是否绑定成功--手机号
const handleChangeEmail = (res: any) => {
  if (res.code == 1) {
    emit('upDateAllList');
    phoneFlag.value = false
    updateUserInfo(phoneForm.value.phone)
    setBaseData()
    showToast.success(t(res.message), { duration: 500 });
  } else {
    showToast.fail(t(res.message), { duration: 500 });
  }
}

const submitCapital = () => {
  console.log(capitalForm.value, '--capitalForm.value--');
  capitalFormRef.value?.validate().then(({ valid, errors }: any) => {
    if (valid) {
      let req: any = NetPacket.req_bind_or_modify_withdraw_password();
      req.operate_type = 1;
      req.old_password = '';
      req.new_password = capitalForm.value.new_password;
      req.role_id = roleInfo.value?.id;
      req.new_password_confirm = capitalForm.value.new_password_confirm;
      PKwebsocket.instance.send(req, true);
    } else {
      console.warn("error:", errors);
    }
  });

}

const handleBindOrModifyWithdrawPassword = (res: any) => {
  if (res.code == 1) {
    showToast.success(t(res.message), { duration: 500 });
    capitalFlag.value = false;
    updateStorePayPwd(capitalForm.value.new_password);
    setBaseData()
  } else {
    showToast.fail(t(res.message), { duration: 500 });
  }
};

const maskNumberPhone = (numStr: string): string => {
  // 首先，我们找到第一个非数字字符的位置，如果没有，则认为是字符串的末尾
  const firstNonDigitIndex = numStr.search(/\D/);
  // 如果没有非数字字符，我们只保留前三个数字，其余用星号替换
  if (firstNonDigitIndex === -1) {
    return numStr.substring(0, 3) + '****' + numStr.substring(numStr.length - 1);
  }
  // 如果有非数字字符，我们保留第一个数字和最后一个非数字字符之间的部分
  const firstPart = numStr.substring(0, firstNonDigitIndex);
  const lastPart = numStr.substring(firstNonDigitIndex);
  // 计算需要用星号替换的部分的长度
  // const maskLength = numStr.length - (firstPart.length + lastPart.length);

  // 返回格式化后的字符串
  return firstPart + '****' + lastPart;
};

watch(
  () => bankListData.value,
  (count: any) => {
    chooseBank.value = count
    bankForm.value.bank = count.value
    bankForm.value.bankName = count.label
  })

watch(
  () => myBankData.value.cardholder_name,
  (count: string) => {
    bankForm.value.accountName = count
    cardholder_name.value = count
  })

watch(
  () => myBankData.value.list,
  (count: any) => {
    if (count.length) {
      setmyDataData(count, 'array')
    }
  })

watch(
  () => myBankData.value.withdraw_pwd,
  (count: string) => {
    if (count) {
      console.log('#########pwd', count)
      setmyDataData(count, 'pwd')
    }
  })
watch(
  () => myBankData.value.phone,
  (n: string) => {
    if (n) {
      setmyDataData(n, 'phone')
    }
  })

onMounted(() => {
  setBaseData();
  if (Local.get('profileCompleted') === 'true') {
    router.replace('/withdrawals');
  }
  eventBus.on("msg_notify_req_new_bank_card_info", handleAddBank);
  eventBus.on("msg_notify_add_usdt_info", handleAddUsdt);
  eventBus.on("msg_notify_bind_modify_email", handleChangeEmail);
  eventBus.on("msg_notify_get_mobile_sms_code", handleSMSback);
  eventBus.on("msg_notify_bind_or_modify_withdraw_password", handleBindOrModifyWithdrawPassword);
})
onUnmounted(() => {
  // 取消监听
  eventBus.off("msg_notify_req_new_bank_card_info", handleAddBank);
  eventBus.off("msg_notify_add_usdt_info", handleAddUsdt);
  eventBus.off("msg_notify_bind_modify_email", handleChangeEmail);
  eventBus.off("msg_notify_get_mobile_sms_code", handleSMSback);
  eventBus.off("msg_notify_bind_or_modify_withdraw_password", handleBindOrModifyWithdrawPassword);
});

</script>

<style scoped lang="scss">
@use "../form.scss";

.calibration {
  width: 100%;
  height: 100%;
  background: #100E26;
  color: #fff;

  .flex {
    display: flex;
  }

  .title {
    padding: 16px 14px 6px;
    line-height: 21px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #E43939;
    display: flex;
    justify-content: center;
  }

  .content {
    height: 90%;
    overflow-y: auto;
    padding: 0 14px;

    .sub_btn {
      width: 307px;
      height: 44px;
      border-radius: 8px;
    }

    &>div {
      overflow-y: auto;
      border-radius: 8px;
      margin: 0 0 12px;
      padding: 16px 20px 30px;
      background: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

      :deep(.nut-cell-group__wrap) {
        .nut-cell {
          margin-bottom: 16px;
        }
      }
      .form_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 16px;
        line-height: 21px;
        color: #fff;
      }

      .bank_list {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow-y: auto;

        .bank_item {
          position: relative;
          display: flex;
          justify-content: start;
          align-items: center;
          font-size: 14px;
          width: 100%;
          height: 76px;
          border-radius: 8px;
          background: #1D1C3C;
          box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
          border: 1px solid #333260;

          &::after {
            content: '';
            position: absolute;
            width: 88px;
            height: 33px;
            background: url(/imgs/payment/icon_bank.webp) center no-repeat;
            background-size: 100%;
            right: 3px;
            bottom: 5px;
          }

          .bank_l_icon {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            margin-left: 10px;
            border-radius: 50%;
            padding: 12px 6px 13px;
            border: solid 3px #d6cdff;
            background-color: #fff;

            &::after {
              content: '';
              position: absolute;
              width: 1px;
              height: 48px;
              background: rgba(168, 168, 202, 0.2);
              right: -17px;
            }

            img {
              max-width: 45px;
            }
          }

          .bank_l_name {
            margin-left: 30px;
            flex: auto;
            width: 100%;
            overflow: hidden;

            p {
              word-wrap: break-word;
              font-size: 12px;
            }

            p:last-child {
              font-size: 16px;
              font-weight: 600;
            }
          }
        }
      }

      .usdt_list {
        .bank_item {
          &::after {
            background-image: url(/imgs/payment/icon_usdt.webp);
          }
        }
      }

      .phone_finish {
        .bank_item {
          &::after {
            background: none;
          }
        }
      }
    }

    .btn {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }

    .bank {
      .bank_form {
        .bank_add_form {
          .add_bank_text {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            font-weight: normal;
            margin-bottom: 14px;
            color: #fff;
          }

          .choose_bank {
            display: flex;
            flex-flow: nowrap !important;
            justify-content: space-between;

            .choose_bank_l {
              display: flex;
              align-items: center;
              width: 195px;
              height: 44px;
              padding-left: 8px;
              border-radius: 8px;
              background: #1D1C3C;
              box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
              //border: 1px solid #333260;

              .bank_cicon {
                display: flex;
                flex: none;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                margin-right: 6px;
                border-radius: 50%;
                background: #fff;
                border: solid 1.5px #d6cdff;

                img {
                  width: 20px;
                  border-radius: 50%;
                }
              }

              .bank_cname {
                color: #fff;
                font-size: 12px;
                width: 220px;
                line-height: 16px;
              }
            }
          }
        }
      }

    }

    .phone {
      .phone_form {
        .phone_input {
          :deep(.nut-input) {
            padding-left: 86px;
          }
        }
        .phone_hand {
          position: absolute;
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 74px;
          height: 44px;
          line-height: 44px;
          font-size: 14px;
          font-weight: 400;
          text-align: center;
          //margin: 0 10px 0 0;
          //border-radius: 8px;
          //background: #1D1C3C;
          //box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
          //border: 1px solid #333260;
          color: #fff;
          .xl_icon {
            margin-left: 6px;
            width: 19px;
            height: 21px;
            background: url('/imgs/payment/icon_xl.webp') center no-repeat;
            background-size: 100%;
          }
        }

        .phoneCode {
          .change_btn {
            width: 110px;
            margin-left: 10px;
          }
        }
      }
    }

    .capital {
      .capital_finish {
        &>div {
          width: 307px;
          height: 44px;
          line-height: 44px;
          margin: 16px 0 0;
          text-align: center;
        }
      }

    }
  }

  :deep(.nut-overlay) {
    top: 15px;
    background: rgba(0, 0, 0, .1);
  }

  :deep(.nut-menu) {
    .nut-popup {
      width: 305px;
      left: 35px;
      top: 15px;
      background: #1D1C3C;
      border-radius: 8px;

      * {
        color: #fff;
      }

      .nut-menu-item__content {
        padding: 0;

        .nut-menu-item__option {
          height: 48px;
          padding: 0 14px;
          border-bottom: 0.5px solid #333260;

          &.active {
            background: #333260;
          }
        }
      }
    }
  }
}

.tips {
  text-align: start;
  padding: 15px 10px 40px;

  p {
    padding-bottom: 15px;
    color: #fff;

    >b {
      color: yellow;
    }

    >span {
      color: red;
      cursor: pointer;
    }
  }

  .btn_block {
    width: 200px;
    margin: 0 auto;
  }
}
</style>
